<template>
  <div class="my_vote">
    <head-top head-title="投票记录" goBack="true"></head-top>
    <div class="no-data" style="padding-top:250px; text-align: center; font-size:20px"
         v-show="flag && supVote === '' && satVote === '' && canVote === '' && phoneVote===''">
      您暂无投票数据
    </div>
    <div class="vote_all">
      <!--选举投票结果-->
      <div class="vote_box" v-if="canVote">
        <div class="box_list">
          <span>选举(其它)投票</span>
        </div>
        <div class="list_li" v-for="(cans,index) in canVote" :key="'c'+index">
          <div class="introduces">
            <div class="pcontent_word">
              <div class="word_top">
                <p>{{cans.title}}</p>
                <span>{{cans.created_at}}</span>
              </div>
              <div class="word_bottom">
                <p>投票码：{{cans.numbering}}</p>
                <span @click="$router.push('/home/VillageDetail/'+cans.article_id+'/'+cans.type)">查看详细内容</span>
              </div>
            </div>
          </div>
          <div class="joinbtn">
             <button @click="goMyVoteResult(cans.voteId,'can',cans.can_type,cans.type,cans.option_type)">
              <span>查看投票结果</span>
            </button>
          </div>
        </div>
      </div>

      <!--事务投票结果-->
      <div class="vote_box" v-if="supVote">
        <div class="box_list">
          <span>事务投票</span>
        </div>
        <div class="list_li" v-for="(sups,index2) in supVote" :key="'s'+index2">
          <div class="introduces">
            <div class="pcontent_word">
              <div class="word_top">
                <p>{{sups.title}}</p>
                <span>{{sups.created_at}}</span>
              </div>
              <div class="word_bottom">
                <p>投票码：{{sups.numbering}}</p>
                <span @click="$router.push('/home/VillageDetail/'+sups.article_id+'/'+sups.type)">查看详细内容</span>
              </div>
            </div>
          </div>
          <div class="joinbtn">
            <button @click="goMyVoteResult(sups.voteId, 'sup', pageType, sups.type, sups.option_type)">
              <span>查看投票结果</span>
            </button>
          </div>
        </div>
      </div>

      <!--满意度投票结果-->
      <div class="vote_box" v-if="satVote">
        <div class="box_list">
          <span>满意度投票</span>
        </div>
        <div class="list_li" v-for="(sats,index3) in satVote" :key="'t'+index3">
          <div class="introduces">
            <div class="pcontent_word">
              <div class="word_top">
                <p>{{sats.title}}</p>
                <span>{{sats.created_at}}</span>
              </div>
              <div class="word_bottom">
                <p>投票码：{{sats.numbering}}</p>
                <!--老版满意度-->
                <span v-if="sats.type === 'vote'" @click="$router.push('/home/TakeInDetail/'+sats.satId)">查看详细内容</span>
                <!--新版满意度-->
                <span v-if="sats.type === 'voting'" @click="$router.push('/home/VillageDetail/'+sats.satId+'/'+sats.type)">查看详细内容</span>
              </div>
            </div>
          </div>
          <div class="joinbtn">
            <button @click="goMyVoteResult2(sats.satId, 'sat', sats.score_type, sats.type, sats.option_type)">
              <span>查看投票结果</span>
            </button>
          </div>
        </div>
      </div>
      <!--电话投票-->
      <div class="vote_box" v-if="phoneVote">
        <div class="box_list">
          <span>电话投票</span>
        </div>
        <ul>
          <li class="news_li" v-for="(phone,index4) in phoneVote" :key="'p'+index4">
            <div class="vote_msg">
              <p class="msg_text">{{phone.title}}</p>
              <p class="tpm">投票码：{{phone.number}}</p>
            </div>
            <div class="news_title">
              <div class="p" ref="liCon">房号：</div>
              <div class="open" @click="open(phone)">
                <p v-if="!phone.showContent">【展开】</p>
                <p v-if="phone.showContent">【收起】</p>
              </div>
            </div>
            <div class="news_list" v-for="(item2,index5) in phone.house" v-show="phone.showContent">
              <p>{{item2}}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
  .my_vote {
    padding-top: 40px;
    width: 100%;
    .vote_all {
      .vote_box {
        width: 100%;
        .box_list {
          width: 100%;
          height: 40px;
          background: #f2f2f2;
          span {
            font-size: 14px;
            color: #656b79;
            line-height: 40px;
            margin-left: 10px;
          }
        }
        .list_li {
          padding: 10px;
          border-bottom: 1px solid #f2f2f2;
          .introduces {
            width: 100%;
            /*height: 70px;*/
            .pcontent_word {
              float: left;
              width: 100%;
              margin-left: 5px;
              position: relative;
              .word_top {
                margin-top: 10px;
                height: 22px;
                p {
                  font-size: 15px;
                  float: left;
                  width: 168px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
                span {
                  float: right;
                  font-size: 10px;
                  color: #666;
                  margin-right: 6px;
                }
              }
              .word_bottom {
                height: 22px;
                line-height: 22px;
                p {
                  font-size: 13px;
                  float: left;
                  color: #666666;
                  width: 180px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
                span {
                  float: right;
                  font-size: 12px;
                  color: #0078de;
                  margin-right: 6px;
                }
              }
              img {
                width: 90px;
                position: absolute;
                right: 10px;
                top: 0;
              }
            }
          }
          .joinbtn {
            text-align: center;
            button {
              width: 100%;
              border: 1px solid #0078de;
              background: #fff;
              outline: none;
              margin-top: 10px;
              span {
                line-height: 40px;
                font-size: 15px;
                color: #0078de;
              }
            }
          }
          .phone_box{
            width: 100%;
            .pcontent_word2 {
              width: 100%;
              /*margin-left: 5px;*/
              position: relative;
              .word_top2 {
                margin-top: 10px;
                height: 22px;
                p {
                  font-size: 15px;
                  float: left;
                  width: 168px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
                span {
                  float: right;
                  font-size: 10px;
                  color: #666;
                  margin-right: 6px;
                }
              }
              .tpm{
                font-size: 13px;
                color: #666666;
              }
            }
          }
        }
        ul{
          .news_li{
            /*width: 100%;*/
            padding: 0 10px 10px 10px;
            border-bottom: 1px solid #f2f2f2;
            .vote_msg{
              .msg_text{
                font-size: 15px;
                margin-top: 10px;
              }
              .tpm{
                color: #666666;
                margin-top: 10px;
                font-size: 13px;
              }
            }
            .news_title{
              display: inline-flex;
              width: 100%;
              justify-content: space-between;
              font-size: 14px;
              color: #666666;
              margin-top: 10px;
              margin-bottom: 10px;
            }
            .news_list{
              width: 100%;
              background: #f2f2f2;
              padding-top: 10px;
              p{
                line-height: 20px;
                font-size: 13px;
              }
            }
          }
        }
      }
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import commonUrl from '../../common/js/commonUrl.js'
  import { loadUserId } from '../../common/js/cache.js'
  import qs from 'qs'

  export default {
    data () {
      return {
        pageType: 0, // 事物和满意度(选项)进入投票详情的标识
        supVote: [], // 事务投票
        canVote: [], // 选举投票
        satVote: [], // 满意度投票
        phoneVote: [], // 电话投票
        flag: false // 标识符用于精致暂无数据显示
      }
    },
    // 页面缓存写法
    beforeRouteEnter: (to, from, next) => {
      if (from.name === 'MyVoteResult') {
        to.meta.isBack = true
      }
      next()
    },
    activated () {
      if (!this.$route.meta.isBack) {
        this.getMyVote()
      }
      this.$route.meta.isBack = false
    },
    // created () {
    //   this.getMyVote()
    // },
    methods: {
      getMyVote () {
        const url = `${commonUrl.apihost}index.php/home/my_vote/getMyVote`
        const data = {
          userId: loadUserId()
        }
        this.$http.post(url, qs.stringify(data), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(res => {
          // console.log(res)
          if (res.data.code === 200) {
            this.supVote = res.data.data.sup // 事务投票
            this.canVote = res.data.data.can // 选举投票
            this.satVote = res.data.data.sat // 满意度投票
            this.phoneVote = res.data.data.phone // 电话投票
            if (this.supVote === '' || this.canVote === '' || this.satVote === '' || this.phoneVote) {
              this.flag = true
            }
          }
        })
      },
      // 查看投票结果
      goMyVoteResult (id, type, style, newold, otype) {
        this.$router.push({
          path: '/my/MyVoteResult',
          query: {
            id: id,
            type: type,
            style: style,
            newold: newold,
            otype: otype
          }
        })
      },
      // 查看投票结果（满意度）
      goMyVoteResult2 (id, type, ctype, newold, otype) {
        // 选项满意度
        if (ctype === 1) {
          this.$router.push({
            path: '/my/MyVoteResult',
            query: {
              id: id,
              type: type,
              style: '',
              newold: newold,
              otype: otype
            }
          })
        } else if (ctype === 2) { // 填写满意度
          this.$router.push({
            name: 'MySatisResult',
            params: {
              id: id,
              type: type
            }
          })
        } else { // 新版满意度
          this.$router.push({
            path: '/my/MyVoteResult',
            query: {
              id: id,
              type: type,
              style: '',
              newold: newold,
              otype: otype
            }
          })
        }
      },

      // 展开收起
      open(item) {
        item.showContent = !item.showContent
      }
    },
    components: {
      headTop
    }
  }
</script>
